<template>
	<image src="http://121.40.242.216:9000/bucket-chat/14343aa670ffc834771edd17c1151da.png" class="send-bottle" @click="open_send"></image>
	<view class="main">
		<view class="ele1">
			<button class='ele1' @click="open_receive">
				接收漂流瓶
			</button>
		</view>
	</view>
	
	<view class="send"  v-if="em_send">
		<textarea  v-model="content" style="width: 60%; height: 50%; margin-top: 50rpx; font-family: Arial, sans-serif;font-size: 20px;"></textarea>
		<text @click="send" style="font-family: Arial, sans-serif;font-size: 20px; position: fixed;top:75%">点击信纸编辑，点击信包发送</text>
	</view>
	<view class="receive" v-if="em_receive">
		<textarea style="top: 180rpx;   
		                    width: 100%;   
		                    height: 18%;
		                    font-family: Arial, sans-serif;   
		                    font-size: 20px;   
		                    overflow:auto">  
		        {{question}}  
		    </textarea>  
			<p style="top:400rpx;position: fixed;background-color:antiquewhite;width: 100%;">回信</p>
		    
		    <textarea
						v-model="reviceContent"
						style="top: 180rpx;   
		                    width: 100%;   
		                    height: 30%;   
		                    font-family: Arial, sans-serif;   
		                    font-size: 20px;   
		                    margin-top: 13px; /* 添加上边距以防止重叠 */  
							margin-bottom:100rpx;
		                    overflow: auto;">  
		        <!-- 第二个 textarea 的内容 -->  
		    </textarea> 
		<button style="top:5%; right: 30%;" @click="receive">发送</button>
		<button style="top:5%; left: 30%;" @click="down_receive">取消</button>
		<button></button>
	</view>

</template>

<script setup lang="ts">
	import { ref } from 'vue';
	
	let em_send = ref<boolean>(false);
	let em_receive = ref<boolean>(false);
	
	let question = ref<string>();
	let id = ref<string>();
	
	let content = ref<string>();
	let reviceContent = ref<string>();
	
	const open_send = ()=>{
		console.log("open_send")
		em_send.value=!em_send.value;
		console.log(em_send.value)
	}
	const open_receive = ()=>{
		uni.request({
		    url: 'http://121.40.242.216:8081/api/bottle/getone',
			method:'GET',
		    data: {
		    },
		    header: {
				'Content-Type': 'application/json',
				'satoken':uni.getStorageSync("satoken"),
				'loginId':uni.getStorageSync("loginId")
		    },
		    success: (res) => {
				console.log(res.data.data);
				question.value=res.data!.data.question;
				id.value=res.data!.data.bottle_id;
		    }
		});
		console.log("open_receive")
		em_receive.value=!em_receive.value;
	}
	const down_receive = ()=>{
		em_receive.value=!em_receive.value;
	}
	const down_send = ()=>{
		em_send.value=!em_send.value;
	}
	const receive = ()=>{
		uni.request({
		    url: 'http://121.40.242.216:8081/api/bottle/reply',
			method:'POST',
		    data: {
				message:reviceContent.value,
				bottle_id:id.value
		    },
		    header: {
				'Content-Type': 'application/json',
				'satoken':uni.getStorageSync("satoken"),
				'loginId':uni.getStorageSync("loginId")
		    },
		    success: (res) => {
				console.log(res.data);
		    }
		});
		uni.showToast({
			title:'加载中',
			icon:'none'
		})
		em_receive.value=!em_receive.value;
		console.log(reviceContent.value);
		reviceContent.value=null;
	}
	const send = ()=>{
		uni.showToast({
			title:'加载中',
			icon:'none'
		})
		em_send.value=!em_send.value;
		console.log(content.value)
		
		uni.request({
		    url: 'http://121.40.242.216:8081/api/bottle/add',
			method:'POST',
		    data: {
				question:content.value
		    },
		    header: {
				'Content-Type': 'application/json',
				'satoken':uni.getStorageSync("satoken"),
				'loginId':uni.getStorageSync("loginId")
		    },
		    success: (res) => {
				console.log(res.data);
		    }
		});
		content.value=null;
	}
</script>

<style>
	.receive{
		width: 750rpx;
		height: 1300rpx;
		background: url('http://121.40.242.216:9000/bucket-chat/99c18fccc2f5ecd8c14f9b5aad94a8f.png');
		background-size: cover; /* 使背景图像覆盖整个元素 */
		background-position: center; /* 背景图像居中对齐 */  
		background-repeat: no-repeat;
		position: fixed;
		left: 50%; /* 位于水平中央 */  
		transform: translate(-50%, -50%); /* 通过平移来精确居中 */  
		top:50%;
		display: flex;          /* 使用 Flexbox */  
		flex-direction: column;
		ustify-content: flex-start;/* 垂直方向上方对齐 */  
		opacity: 0.9;
	}
	.send{
		width: 700rpx;
		height: 700rpx;
		background: url('http://121.40.242.216:9000/bucket-chat/4db767077de8d621ba673cc2b80e4d4.png');
		background-size: cover; /* 使背景图像覆盖整个元素 */
		background-position: center; /* 背景图像居中对齐 */  
		background-repeat: no-repeat;
		position: fixed;
		left: 50%; /* 位于水平中央 */  
		transform: translate(-50%, -50%); /* 通过平移来精确居中 */  

		top:50%;
		display: flex;          /* 使用 Flexbox */  
		justify-content: center; /* 水平居中 */  
		align-items: flex-start; /* 垂直方向上方对齐 */  
		opacity: 0.8;
	}
	
	.ele1{
		width: 100%;
		height: 100rpx;
		opacity: 0.6;
		border-radius: 10%;
		top: 30%;
		position: fixed;
	}
	.main{
		height: 1285rpx;
		width: 100%;
		background:url('');
		background-size: cover; /* 使背景图像覆盖整个元素 */
		background-position: center; /* 背景图像居中对齐 */  
		background-repeat: no-repeat;
	}
	.send-bottle{
		border-radius: 50%;  
		width: 230rpx;  
		height: 230rpx;  
		position: fixed;  
		right: 0; /* 使元素在右侧 */  
		top: 70%;
	}
</style>